<template>
  <div
    class="data-list-container animate__animated"
    :class="[visible ? 'animate__fadeIn' : 'animate__fadeOut']"
  >
    <div class="base-inner"></div>
    <div class="base-body-container">
      <div class="export" v-if="treeItem.isProject">
        <a-button
          class="cu-btn-primary margin-bottom-xs"
          @click="exportExcel()"
        >
          <a-icon type="vertical-align-bottom" />
          导出考核报表
        </a-button>
      </div>
      <div class="inner-score">
        <div class="icon"></div>
        <div class="text">
          项目考核总评分/自评分/总分：{{ scoreSource.score || 0 }}/{{
            scoreSource.ownScore || 0
          }}/{{ scoreSource.totalScore || 0 }}分
        </div>
      </div>
      <div class="table-container">
        <vxe-table
          ref="xTable"
          height="620px"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="name" title="一级评价指标"> </vxe-column>
          <vxe-column field="score" title="评分(分)"> </vxe-column>
          <vxe-column field="ownScore" title="自评分(分)"> </vxe-column>
          <vxe-column field="totalScore" title="总分(分)"> </vxe-column>
          <vxe-column
            v-if="treeItem.isProject"
            field="operate"
            width="180"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoDetail(row)">
                  查看
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
//数据明细
import { axios } from "@/utils/request";
import { downLoadFileByArraybuffer } from "@/utils/util";
import { getStaticFirstDetail } from "@/api/qualityEngineering";
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    treeItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    dataType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableData: [],
      loading: false,
      scoreSource: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //查看
    gotoDetail(row) {
      this.$emit("handelModal", row);
    },

    getData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { orgCode, childOrgCode } = this.treeItem;
        getStaticFirstDetail({ tenantCode: orgCode, childOrgCode })
          .then((res) => {
            this.scoreSource = res?.data ?? {};
            this.tableData = this.scoreSource?.list ?? [];
            resolve();
          })
          .catch((_) => {
            this.scoreSource = {};
            this.tableData = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //导出
    exportExcel() {
      return new Promise((resolve, reject) => {
        let { tenantCode } = this.$parent;
        axios
          .get(
            `/probusiness/qeStatistics/exportTJReport?tenantCode=${tenantCode}`,
            {
              apiType: "file",
              responseType: "arraybuffer",
            }
          )
          .then((res) => {
            downLoadFileByArraybuffer(res, "考核统计报表");
            resolve();
          })
          .catch((_) => {
            this.$message.error("导出失败，请稍后重试！");
            reject();
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.data-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .base-inner {
    padding-top: 20px;
  }
  .base-body-container {
    flex: 1;
    background-color: @base-bg-color;
    border-radius: 6px 6px 6px 6px;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    flex-direction: column;
    .export {
      display: flex;
      justify-content: flex-end;
    }
    .inner-score {
      height: 46px;
      padding: 0 24px;
      background: rgba(22, 119, 255, 0.05);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid rgba(22, 119, 255, 0.6);
      display: flex;
      align-items: center;
      .icon {
        width: 16px;
        height: 19px;
        background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_11.png);
        background-size: 100% 100%;
      }
      .text {
        flex: 1;
        padding-left: 10px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #1677ff;
      }
    }
    .table-container {
      padding-top: 10px;
      flex-shrink: 0;
      flex: 1;
    }
  }
}
</style>
